<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <p v-if="price > 1000"> 洗脚 </p>
        <p v-else-if="price > 500"> 吃大餐 </p>
        <!-- 判断中间不能出现多余的标签 -->
        <!-- <span></span> -->
        <p v-else-if="price > 50"> 沙县小吃 </p>
        <p v-else> 吃个棒棒糖 </p>


        <button @click="isShow = !isShow">切换显示</button>

        <!-- 外层会多出一个 div 标签 -->
        <!-- <div v-if="isShow">
            <h1>这个是h1标签</h1>
            <h2>这个是h2标签</h2>
            <h3>这个是h3标签</h3>
            <h4>这个是h4标签</h4>
            <h5>这个是h5标签</h5>
            <h6>这个是h6标签</h6>
        </div> -->

        <!-- template 是一个 vue 自带的空标签，不会被渲染到页面中 -->
        <template v-if="isShow">
            <h1>这个是h1标签</h1>
            <h2>这个是h2标签</h2>
            <h3>这个是h3标签</h3>
            <h4>这个是h4标签</h4>
            <h5>这个是h5标签</h5>
            <h6>这个是h6标签</h6>
        </template>

        <hr>
        <!-- v-if 是通过添加或移除标签实现 -->
        <!-- 而v-show类似微信小程序的hidden属性 -->
        <!-- v-show 是通过 css 样式 display:none 来实现显示隐藏 -->
        <h1 v-show="isShow">你笑起来真好看</h1>
        <!-- template 上不能使用 v-show，因为 template 不会被渲染 -->
        <template v-show="isShow">
            <h1>这个是h1标签</h1>
            <h2>这个是h2标签</h2>
            <h3>这个是h3标签</h3>
            <h4>这个是h4标签</h4>
            <h5>这个是h5标签</h5>
            <h6>这个是h6标签</h6>
        </template>

        <!-- 
            v-if :
            是通过添加和移除一个标签实现显示和隐藏的
            频繁切换的时候会频繁创建和删除标签，所以消耗比较大
            默认条件不成立的时候，不会显示标签（初始消耗比较小）
            不频繁切换的时候使用 v-if

            v-show :
            是通过 css 样式 display:none 来实现显示隐藏
            频繁切换的时候会通过 display:none 的改变实现显示隐藏，消耗比较小
            默认条件不成立的时候，会显示标签（初始消耗比较大）
            频繁切换的时候使用 v-show
        -->

        <!-- 
            v-if 和 v-for 不推荐一起使用
            同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。
            vue3 中 v-if 的优先级会高于 v-for
            vue2 中 v-for 的优先级会高于 v-if
        -->
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                price: 500,
                isShow: true
            }
        },
        methods: {},
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>